<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css魔法</title>
    <style type="text/css">
        li{
            list-style-type: none;
        }
        *{ margin:0; padding:0; border:0; outline:0; font-family:"Microsoft YaHei";}
        body{ font-size:12px;}
        #box{ width:200px; height:200px; background:orange; position:absolute; left:0; top:0;}

        .f-cb{ zoom:1;}
        .f-cb:after,.f-cb:before{ clear:both; content:""; display:table; height:0; }


        ul{ list-style:none;}

        .m{ width:700px; padding:20px; border:1px solid  #ccc; margin:50px auto; overflow:hidden;}
        .m1 { position:relative; }
        .m1:after,.m1:before { clear:both; content:""; display:table; height:0; margin-bottom:20px;}
        .m1 dt a{ width:60px; height:60px; background:#CCC; display:inline-block; text-align:center; line-height:60px; }
        .m1 dd{ max-width:274px; border:1px solid #ccc; border-radius:3px; padding:10px ;  background:#ccc; box-sizing:border-box; position:relative;}
        .m1 dd:before{ position:absolute; bottom:5px;  content:""; border-width:10px; border-style:solid; }
        .m1.he dd:before,.m1.vhe dd:before{ left:-20px; border-color:transparent #ccc  transparent transparent;   }
        .m1.me dd:before,.m1.vme dd:before{ right:-20px; border-color:transparent  transparent transparent  #ccc; }
        .m1.he dt { float:left; }
        .m1.he dd{ margin-left:20px; margin-top:20px ;float:left; }
        .m1.me dt { float:right; margin-left:20px;}
        .m1.me dd { float:right; margin-top:20px;}

        .m1.he dt a{ float:left; }
        .m1.he dt span{ display:block; float:left;  margin-right:-200px; color:#666; margin-left:20px;}

        .m1.me dt a{ float:right; }
        .m1.me dt span{ display:block; float:right;  margin-left:-200px; color:#666; margin-right:20px;}


        .m1.vhe dt a{ position:absolute; bottom:0; }
        .m1.vhe dt span{ padding-left:80px; }
        .m1.vhe dd{ margin-left:80px; margin-top:5px;}

        .m1.vme dt a{ position:absolute; bottom:0; right:0;}
        .m1.vme dt span{ padding-right:80px; text-align:right; display:block; }
        .m1.vme dd{ margin-right:80px; margin-top:5px; float:right;}



        a:link,a:visited {
            color: black;
            text-decoration: none;
        }
        a:hover,a:active {
            text-decoration: underline;
        }



        .m02{ width:318px; border:1px solid #999; margin-left:20px;  }
        .m2 li{ clear:both; display:table; padding-left:20px;}
        .m2{ width:168px;  }
        .m2 li a{float:left; max-width:168px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
        .m2 li span{ float:left; padding-left:10px; margin-right:-100px;}
    </style>

    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script>
        <%--function loadXMLDoc() {--%>
        <%--var xmlhttp;--%>
        <%--if (window.XMLHttpRequest) {--%>
        <%--xmlhttp = new XMLHttpRequest();--%>
        <%--}--%>
        <%--else {--%>
        <%--xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");--%>
        <%--}--%>
        <%--xmlhttp.onreadystatechange = function () {--%>
        <%--if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {--%>


        <%--document.getElementById("myDiv").innerHTML = xmlhttp.responseText;--%>
        <%--}--%>
        <%--}--%>
        <%--xmlhttp.open("GET", "/robot?key=37bdd2f714ea44b9b2e6e89bedce7462&info=北京今日天气&loc=北京市中关村&userid=123456", true);--%>
        <%--xmlhttp.send();--%>
        <%--}--%>



        $(document).ready(function(){
            $("button").click(function(){
                $.get("${pageContext.request.contextPath}/robot",
                      {
                          key:"37bdd2f714ea44b9b2e6e89bedce7462",
                          info:$("input#info").val()
                      },
                      function(data,status){
                          //document.getElementById("myDiv").innerHTML = data;

                          $("#frame").append("<dl class='me m1'><dt><a>robot</a><span>2015-09-11</span></dt><dd>"+$("input#info").val()+"</dd></dl>");
                          $("#frame").append("<dl class='vhe m1'><dt><a>robot</a><span>2015-09-11</span></dt><dd>"+data+"</dd></dl>");

                      });
            });
        });
    </script>

</head>


<body>
<div class="m" id="frame">

    <dl class='vhe m1'><dt><a>robot</a><span>2015-09-11</span></dt><dd>您好，请问有什么问题吗？</dd></dl>

</div>
<!--<div id="box"></div>-->

<div  style="margin-left: 31%"><input style="border: 1px solid black;width: 48%;height:50px" type="text" id="info" name="info"><button style="height:50px;width: 100px" type="button" onclick="loadXMLDoc()">发送</button></div>
</body>
</html>